import * as echarts from "echarts";
import React, { useEffect, useRef } from "react";

const MyEcharts = (props) => {
  console.log('OK ...');
  let echartsEle = useRef(null);
  useEffect(() => {
   
    
    // 柱状图
    let barOptions = {
      title: {
        text: "前端语言使用情况",
      },
      tooltip: {},
      xAxis: {
        data: [],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: props.data,
        },
      ],
    };

    // 饼图
    let pieOptions = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          padAngle: 5,
          itemStyle: {
            borderRadius: 10,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: props.data,
        },
      ],
    };

    let chartInstance = echarts.init(echartsEle.current);
    if (props.type === "bar") {
      barOptions.xAxis.data = props.xAxis;
      barOptions.data = props.data;
      console.log(barOptions);
      chartInstance.setOption(barOptions, true);
    }
    if (props.type === "pie") {
      pieOptions.series.data = props.data;
      chartInstance.setOption(pieOptions);
    }
  }, [props.data]);

  return <div ref={echartsEle} style={props.styleObj}></div>;
};

export default MyEcharts;
